<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="UTF-8">
		<title>红酒会 - 智能红酒管家</title>
		<link rel="shortcut icon" type="image/x-icon" href="${ctx}/favicon.ico" />
		<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/2.3.2/css/bootstrap.min.css" />
		<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/2.3.2/css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="${ctx}/static/styles/style.css" />
	</head>
<body>
	
	<c:import url="/header"><c:param name="module">talk</c:param></c:import>
	
	<div class="container" id="container">
		<div class="row">
				
			<!-- 内容 -->
			<div class="span8">
				<div>
					<ul class="breadcrumb">
						<li><a href="${ctx}/talk">酒说说</a> <span class="divider">/</span></li>
	  					<li class="active">发布说说</li>
					</ul>
				</div>
				<div>
					<form id="form" class="form-horizontal" action="${ctx}/talk/save" method="post">
						<input type="hidden" name="id" value="${topic.id}"/>
						<div class="control-group">
							<label class="control-label" for="title">
								<span style="color:red;"><strong>*</strong></span>
								标题</label>
							<div class="controls">
								<input type="text" id="title" name="title" class="input-xlarge" value="${topic.title}">
								<span id="error_title"></span>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="content">
								<span style="color:red;"><strong>*</strong></span>
								内容</label>
							<div class="controls">
								<script type="text/plain" id="content" name="content" style="width:100%;">${topic.content}</script>
								<em id="error_content"></em>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="type">标签</label>
							<div class="controls">
								<c:set var="flag" value="0" />
								<c:forEach var="tag" items="${tagList}">
									<c:if test="${tag.type != flag}"><br/></c:if>
									<a href="javascript:void(0)" onclick="changeTags('${tag.id}')">
										<c:choose>
											<c:when test="${tag.status == 0}">
												<span class="label" id="tag${tag.id}" val="${tag.id}:${tag.name};">${tag.name}</span>
											</c:when>
											<c:otherwise>
												<span class="label label-important" id="tag${tag.id}" val="${tag.id}:${tag.name};">${tag.name}</span>
											</c:otherwise>
										</c:choose>
									</a>
									<c:set var="flag" value="${tag.type}" />
								</c:forEach>
								<input type="hidden" id="tags" name="tags" />
							</div>
						</div>
						<div class="control-group" style="text-align:center">
					    	<div class="controls">
					    		<a href="javascript:void(0)" onclick="history.back();" class="btn">
					    			&nbsp;&nbsp;&nbsp;返&nbsp;&nbsp;&nbsp;回&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;
					      		<button type="submit" class="btn btn-primary">&nbsp;&nbsp;&nbsp;提&nbsp;&nbsp;&nbsp;交&nbsp;&nbsp;&nbsp;</button>
					    	</div>
					  	</div>
					</form>
				</div>
			</div>
			
			<!-- 侧栏 -->
			<div class="span4">
				<c:import url="/talk/right"><c:param name="module">talk</c:param></c:import>
			</div>
			
			<script type="text/javascript" src="${ctx}/static/scripts/jquery.validate.min.js"></script>
			<script type="text/javascript" src="${ctx}/static/libs/ueditor/ueditor.config.js"></script>
			<script type="text/javascript" src="${ctx}/static/libs/ueditor/ueditor.all.js"></script>
			<script type="text/javascript">
				$(function() {
					UE.getEditor('content');
					$('#form').validate({
						rules: {
							title: {
								required: true,
								maxlength: 50
							}
						},
						messages: {
							title: {
								required: '请填写标题',
								maxlength: '标题不能超过50个字符'
							}
						},
						errorElement: 'em',
						errorPlacement: function(error, element) {
							error.appendTo($("#error_" + element.attr("id")));
						},
						submitHandler: function(form) {
							if(UE.getEditor('content').getContent().length < 10) {
								$('#error_content').attr('class', 'error').text('内容好像有点少，多写点吧');
							}else {
								var tags = '';
								$('span.label-important').each(function() {
									tags += $(this).attr('val');
								});
								$('#tags').val(tags);
								form.submit();
							}
						}
					});
				});
				function changeTags(tagId) {
					var tag = $('#tag' + tagId);
					if('label' == tag.attr('class')) {
						tag.attr('class', 'label label-important');
					}else {
						tag.attr('class', 'label');
					}
				}
			</script>
		</div>
	</div>
</body>
</html>